class Banner {
    constructor(select) {
            this.ele = document.querySelector(select);
            this.imgBox = this.ele.querySelector('.imgBox');
            this.pointBox = this.ele.querySelector('.pointBox');
            this.index = 0;
            this.timer = 0;
            this.init()
        }
        // 初始化
    init() {
            //1.指示器的小点
            this.setPoint()
                //2.自动播放
            this.autoPlay()
                //3.移入移出
            this.overOut()
                //4.点击事件
            this.bindEvent()

        }
        //1.要生成多少小点  imgBox子元素的数量
        //2.循环对应的li并放在pointBox里
        //3.调整宽度
    setPoint() {
            const n = this.imgBox.children.length;
            for (let i = 0; i < n; i++) {
                const li = document.createElement('li');
                if (i === 0) li.classList.add('active');
                li.classList.add('point');
                li.dataset.point = i;

                this.pointBox.appendChild(li);
            }
            this.pointBox.style.width = (15) * n + 'px';
        }
        // 切换一张
    ChangeOne(type) {
            this.imgBox.children[this.index].classList.remove('active');
            this.pointBox.children[this.index].classList.remove('active');
            if (type === true) {
                this.index++
            } else if (type === false) {
                this.index--;
            } else {
                this.index = type;
            }

            if (this.index >= this.imgBox.children.length) {
                this.index = 0
            }
            if (this.index < 0) {
                this.index = this.imgBox.children.length - 1;
            }
            this.imgBox.children[this.index].classList.add('active');
            this.pointBox.children[this.index].classList.add('active');
        }
        // 自动播放
    autoPlay() {
            this.timer = setInterval(() => this.ChangeOne(true), 2000);
        }
        //移入移出
    overOut() {
            this.ele.addEventListener('mouseover', () => {
                clearInterval(this.timer)
            })
            this.ele.addEventListener('mouseout', () => {
                this.autoPlay()
            })
        }
        // 点击事件
    bindEvent() {
        this.ele.addEventListener('click', (e) => {
            const t = e.target;
            if (t.className === 'left') this.ChangeOne(false);
            if (t.className === 'right') this.ChangeOne(true);
            if (t.className === 'point') this.ChangeOne(t.dataset.point)
            console.log(t.dataset.point);
        })
    }
}